<script>
import { getUserList } from '@/api/user'

export default {
    name: 'userList',
    data() {
        return {
            userList: [],
            currentPage: 1 // 当前页
        }
    },
    methods: {
        tableRowClassName({ row, rowIndex, }) {

            if (rowIndex % 2 == 0) {
                return 'warning-row'
            }
            return ''
        }

    },
    mounted() {
        getUserList().then(res => {
            console.log(res);
            this.userList = res.data
        })
    },
    computed: {
        tableData() {
            return this.userList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
        }
    }
}
</script>
<template>
    <div>

        <h1>用户列表</h1>

        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column type="index" label="序号" width="180">
                <template #default="{ row, column, $index }">
                    <div>
                        {{ (currentPage - 1) * 10 + $index + 1 }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="tel" label="手机号" />
            <el-table-column prop="telcode" label="验证码" />

        </el-table>

        <el-pagination v-model:current-page="currentPage" background layout="prev, pager, next" :total="userList.length" />


    </div>
</template>
<style scoped lang="scss"></style>